// pages/main-music/main-music.js
import {
  getMusicBanner,
  getSongMenuList

} from "../../services/music"
import recommendStore from "../../store/recommendStore"
import rankingStore, {
  rankingsMap
} from '../../store/rankingStore';
import querySelect from "../../utils/query-select"
import {
  throttle
} from 'underscore'

const app = getApp();
const querySelectThrottle = throttle(querySelect, 100)
Page({
  data: {
    searchValue: "",
    banners: [],
    bannerHeight: 150,
    recommendSongs: [],

    // 歌单数据
    hotMenuList: [],
    recMenuList: [],
    // 巅峰榜数据
    isRankingData: false,
    rankingInfos: {},
  },
  onLoad() {
    this.fetchMusicBanner()
    // this.fetchRecommendSongs()

    this.fetchSongMenuList()

    // 发起action
    recommendStore.onState("recommendSongInfo", this.handleRecommendSongs)
    recommendStore.dispatch("fetchRecommendSongsAction")
    // rankingStore.onState('newRanking', this.handleNewRanking);
    // rankingStore.onState('originRanking', this.handleOriginRanking);
    // rankingStore.onState('upRanking', this.handleUpRanking);
    for (const key in rankingsMap) {
      rankingStore.onState(key, this.getRankingHanlder(key))
    }
    rankingStore.dispatch('fetchRankingDataAction');
    // 获取屏幕的尺寸
    this.setData({
      screenWidth: app.globalData.screenWidth
    });
  },

  // 网络请求的方法封装
  async fetchMusicBanner() {
    const res = await getMusicBanner()
    this.setData({
      banners: res.banners
    })
  },
  async fetchSongMenuList() {
    getSongMenuList().then(res => {
        this.setData({
          hotMenuList: res.playlists
        })
      }),
      getSongMenuList('华语').then((res) => {
        this.setData({
          recMenuList: res.playlists
        });
      });
  },

  // 界面的事件监听方法
  onSearchClick() {
    wx.navigateTo({
      url: '/pages/detail-search/detail-search',
    })
  },
  // onBannerImageLoad() {
  // const query = wx.createSelectorQuery()
  // query.select(".banner-image").boundingClientRect()
  // query.exec((res) => {
  //   this.setData({
  //     bannerHeight: res[0].height
  //   })
  // })
  // }
  onBannerImageLoad(event) {
    querySelectThrottle(".banner-image").then(res => {
      this.setData({
        bannerHeight: res[0].height
      })
    })
  },
  onRecommendMoreClick() {
    // console.log("More");
    wx.navigateTo({
      url: '/pages/detail-song/detail-song?type=recommend',
    })
  },
  // 从Store中获取数据 
  handleRecommendSongs(value) {
    if (!value.tracks) return
    this.setData({
      recommendSongs: value.tracks.slice(0, 6)
    })
  },
  getRankingHanlder(ranking) {
    return value => {
      if (!value.name) return;
    this.setData({ isRankingData: true });
      const newRankingInfos = {
        ...this.data.rankingInfos,
        [ranking]: value
      }
      this.setData({
        rankingInfos: newRankingInfos
      })
    }
  },
  onUnload() {
    recommendStore.offState("recommendSongInfo", this.handleRecommendSongs)
    // rankingStore.offState('newRanking', this.handleNewRanking);
    // rankingStore.offState('originRanking', this.handleOriginRanking);
    // rankingStore.offState('upRanking', this.handleUpRanking);
    for (const key in rankingsMap) {
      rankingStore.offState(key, this.getRankingHanlder(key))
    }
  },
})